<template>
  <div v-if="form.admission_time" class="container">
    <div class="table">
      <h2>基本资料</h2>
      <table>
        <tr>
          <Item
            class="w-33"
            header
            label="入院时间"
            :value="
              formatTime(
                form[config['基本资料']['line1']['入院时间'].key].value,
                'yyyy-MM-dd HH:mm'
              )
            "
          />
          <Item
            class="w-25"
            label="由"
            label-width="54px"
            :value="form[config['基本资料']['line1']['由'].key].value"
          />
          <Item
            label="入院方式"
            :value="form[config['基本资料']['line1']['入院方式'].key].value"
          />
        </tr>
        <tr>
          <Item
            header
            label="入院诊断"
            :value="form[config['基本资料']['line2']['入院诊断'].key].value"
          />
        </tr>
        <tr>
          <Item
            class="w-33"
            header
            label="教育程度"
            :value="form[config['基本资料']['line3']['教育程度'].key].value"
          />
          <Item
            label="宗教"
            label-width="54px"
            :value="formatOptions('基本资料', 'line3', '宗教选项')"
          />
        </tr>
        <tr>
          <Item
            v-if="
              form[config['基本资料']['line3']['沟通方式'].key].value ===
              '不能言语'
            "
            header
            label="沟通方式"
            :value="formatOptions('基本资料', 'line3', '沟通方式选项')"
          />
          <Item
            v-else
            header
            label="沟通方式"
            :value="form[config['基本资料']['line3']['沟通方式'].key].value"
          />
        </tr>
        <tr>
          <Item
            class="w-33"
            header
            label="饮酒"
            :value="form[config['基本资料']['line4']['饮酒'].key].value"
          />
          <Item
            label="已戒"
            label-width="54px"
            :value="form[config['基本资料']['line4']['已戒'].key].value"
            :unit="
              form[config['基本资料']['line4']['已戒'].key].value
                ? config['基本资料']['line4']['已戒'].unit
                : ''
            "
          />
          <Item
            class="w-15"
            label="类别"
            label-width="54px"
            :value="form[config['基本资料']['line4']['类别'].key].value"
          />
          <Item
            class="w-10"
            label="量"
            :value="form[config['基本资料']['line4']['量'].key].value"
            :unit="formatOptions('基本资料', 'line4', '量', '', '单位')"
          />
          <Item
            label="已喝"
            label-width="54px"
            :value="form[config['基本资料']['line4']['已喝'].key].value"
            :unit="
              form[config['基本资料']['line4']['已喝'].key].value
                ? config['基本资料']['line4']['已喝'].unit
                : ''
            "
          />
        </tr>
        <tr>
          <Item
            class="w-15"
            header
            label="抽烟"
            :value="form[config['基本资料']['line5']['抽烟'].key].value"
          />
          <Item
            class="w-15"
            :label="
              form[config['基本资料']['line5']['抽烟'].key].value === '已戒'
                ? '戒烟前'
                : ''
            "
            :value="form[config['基本资料']['line5']['每天几支'].key].value"
            :unit="config['基本资料']['line5']['每天几支'].unit"
          />
          <Item
            class="w-15"
            label="已抽"
            :value="form[config['基本资料']['line5']['已抽年数'].key].value"
            :unit="config['基本资料']['line5']['已抽年数'].unit"
          />
          <Item
            v-if="
              form[config['基本资料']['line5']['抽烟'].key].value === '已戒'
            "
            class="w-15"
            label="已戒"
            :value="form[config['基本资料']['line5']['已戒年数'].key].value"
            :unit="config['基本资料']['line5']['已戒年数'].unit"
          />
          <Item
            v-else
            class="w-15"
            label="戒烟经验"
            :value="form[config['基本资料']['line5']['戒烟经验'].key].value"
          />
          <Item
            label="戒烟想法"
            :value="form[config['基本资料']['line5']['戒烟想法'].key].value"
          />
        </tr>
        <tr>
          <Item
            header
            label="近三个月旅游史"
            :value="
              formatOptions(
                '基本资料',
                'line6',
                '近三个月旅游史选项',
                '选项',
                '内容'
              )
            "
            style="min-width: calc(33% - 12px)"
          />
          <Item
            label="动物接触史"
            :value="
              formatOptions(
                '基本资料',
                'line6',
                '动物接触史选项',
                '选项',
                '内容'
              )
            "
          />
        </tr>
        <tr>
          <Item
            header
            class="w-33"
            label="药物过敏"
            :value="
              formatOptions('基本资料', 'line7', '药物过敏选项', '选项', '内容')
            "
          />
          <Item
            label="过敏食物"
            :value="
              formatOptions('基本资料', 'line7', '过敏食物选项', '选项', '内容')
            "
          />
        </tr>
        <tr>
          <Item
            header
            label="既往史"
            :value="
              formatOptions('基本资料', 'line8', '既往史选项', '选项', '内容')
            "
          />
        </tr>
        <tr>
          <Item
            header
            label="住院或手术史"
            :value="
              formatOptions(
                '基本资料',
                'line9',
                '住院或手术史选项',
                '选项',
                '内容'
              )
            "
          />
        </tr>
        <tr>
          <Item
            header
            label="家族病史"
            :value="
              formatOptions(
                '基本资料',
                'line10',
                '家族病史选项',
                '选项',
                '内容'
              )
            "
          />
        </tr>
        <tr>
          <Item
            header
            label="过去一年曾做过的健康维护处置"
            :value="
              formatOptions(
                '基本资料',
                'line11',
                '过去一年曾做过的健康维护处置选项',
                '选项',
                '内容'
              )
            "
          />
        </tr>
        <tr>
          <Item
            class="w-17"
            header
            label="联系人"
            :value="form[config['基本资料']['line12']['联系人'].key].value"
          />
          <Item
            class="w-16"
            label="关系"
            :value="form[config['基本资料']['line12']['关系'].key].value"
          />
          <Item
            label="电话号码"
            :value="form[config['基本资料']['line12']['电话号码'].key].value"
          />
        </tr>
      </table>
    </div>
    <div class="table">
      <h2>营养与健康</h2>
      <table>
        <tr>
          <Item
            header
            idx="1"
            label="饮食形态"
            :value="
              formatOptions(
                '营养与健康',
                'line1',
                '饮食形态选项',
                '选项',
                '内容'
              )
            "
          />
        </tr>
        <tr>
          <Item
            header
            idx="2"
            label="禁忌食物"
            :value="
              formatOptions(
                '营养与健康',
                'line2',
                '禁忌食物选项',
                '选项',
                '内容'
              )
            "
          />
        </tr>
        <tr>
          <Item
            header
            idx="3"
            label="进食问题"
            :value="
              formatOptions(
                '营养与健康',
                'line3',
                '进食问题选项',
                '选项',
                '内容'
              )
            "
          />
        </tr>
        <tr>
          <Item
            class="w-17"
            header
            idx="4"
            label="体重"
            :value="form[config['营养与健康']['line4']['体重'].key].value"
          />
          <Item
            class="w-16"
            label="身高"
            :value="form[config['营养与健康']['line4']['身高'].key].value"
            style="min-width: calc(28% + 42px)"
          />
          <Item
            label="BMI (体重指数)"
            :value="form[config['营养与健康']['line4']['BMI'].key].value"
          />
        </tr>
        <tr>
          <Item
            header
            label="3—6个月内体重变化"
            :value="
              form[config['营养与健康']['line4']['3—6个月体重变化'].key].value
            "
          />
          <Item
            v-if="
              form[config['营养与健康']['line4']['3—6个月体重变化内容'].key]
                .value
            "
            :value="
              form[config['营养与健康']['line4']['3—6个月体重变化内容'].key]
                .value
            "
            :unit="config['营养与健康']['line4']['3—6个月体重变化内容'].unit"
          />
        </tr>
        <tr>
          <Item
            class="w-58"
            header
            idx="5"
            label="口腔黏膜"
            :value="
              formatOptions(
                '营养与健康',
                'line5',
                '口腔黏膜选项',
                '选项',
                '内容'
              )
            "
          />
          <Item
            label="牙齿"
            label-width="54px"
            :value="form[config['营养与健康']['line5']['牙齿'].key].value"
          />
          <Item
            :value="
              formatOptions('营养与健康', 'line5', '牙齿选项', '选项', '内容')
            "
          />
        </tr>
        <tr>
          <Item
            header
            idx="6"
            label="肠胃问题"
            :value="
              formatOptions(
                '营养与健康',
                'line6',
                '肠胃问题选项',
                '选项',
                '内容'
              )
            "
          />
        </tr>
        <tr>
          <Item
            header
            idx="7"
            label="皮肤"
            :value="
              formatOptions('营养与健康', 'line7', '皮肤选项', '选项', '内容')
            "
            style="min-width: calc(58% - 18px)"
          />
          <Item
            label="Braden评分"
            :value="form[config['营养与健康']['line7']['Braden评分'].key].value"
          />
        </tr>
        <tr>
          <Item
            header
            idx="8"
            label="排尿"
            :value="
              formatOptions('营养与健康', 'line8', '排尿选项', '选项', '内容')
            "
            style="min-width: calc(58% + 25px)"
          />
          <Item
            label="颜色"
            :value="
              formatOptions('营养与健康', 'line8', '颜色选项', '选项', '内容')
            "
          />
        </tr>
        <tr>
          <Item
            header
            idx="9"
            label="排便"
            :value="
              formatOptions('营养与健康', 'line9', '排便选项', '选项', '内容')
            "
          />
        </tr>
        <tr>
          <Item
            header
            idx="10"
            label="排汗"
            :value="
              formatOptions('营养与健康', 'line10', '排汗选项', '选项', '内容')
            "
          />
        </tr>
      </table>
    </div>
    <div class="table">
      <h2>活动与运动</h2>
      <table>
        <tr>
          <Item
            header
            idx="1"
            label="呼吸"
            :value="
              formatOptions('活动与运动', 'line1', '呼吸选项', '选项', '内容')
            "
          />
        </tr>
        <tr>
          <Item
            header
            idx="2"
            label="心跳或脉搏"
            :value="
              formatOptions(
                '活动与运动',
                'line2',
                '心跳/脉搏选项',
                '选项',
                '内容'
              )
            "
          />
        </tr>
        <tr>
          <Item
            header
            idx="3"
            label="活动情况"
            :value="formatOptions('活动与运动', 'line3', '活动情况', '', '')"
          />
          <Item
            :value="
              formatOptions(
                '活动与运动',
                'line3',
                '活动情况选项',
                '选项',
                '内容'
              )
            "
          />
        </tr>
        <tr>
          <Item
            header
            idx="4"
            label="Barthel"
            :value="form[config['活动与运动']['line4']['Barthel'].key].value"
          />
        </tr>
        <tr>
          <Item
            header
            idx="5"
            label="肌肉骨骼"
            :value="
              formatOptions(
                '活动与运动',
                'line5',
                '肌肉骨骼选项',
                '选项',
                '内容'
              )
            "
            style="min-width: calc(58% - 8px)"
          />
          <Item
            idx="6"
            label="肌肉张力"
            :value="form[config['活动与运动']['line5']['肌肉张力'].key].value"
          />
        </tr>
        <tr>
          <Item
            header
            idx="7"
            label="辅助用具"
            :value="
              formatOptions(
                '活动与运动',
                'line6',
                '辅助工具选项',
                '选项',
                '内容'
              )
            "
          />
        </tr>
        <tr>
          <Item
            header
            idx="8"
            label="跌倒/坠床评分"
            :value="
              form[config['活动与运动']['line7']['跌倒/坠床评分'].key].value
            "
            style="min-width: calc(58% + 3px)"
          />
          <Item
            label="措施落实"
            :value="form[config['活动与运动']['line7']['措施落实'].key].value"
          />
        </tr>
        <tr>
          <Item
            class="w-33"
            header
            idx="9"
            label="睡眠时间"
            :value="form[config['活动与运动']['line8']['睡眠时间'].key].value"
          />
          <Item
            label="午睡"
            label-width="54px"
            :value="form[config['活动与运动']['line8']['午睡'].key].value"
            style="min-width: calc(25% - 21px)"
          />
          <Item
            label="辅助睡眠药物"
            :value="
              formatOptions(
                '活动与运动',
                'line8',
                '辅助睡眠药物选项',
                '选项',
                '内容'
              )
            "
          />
        </tr>
      </table>
    </div>
    <div class="table">
      <h2>认知与知觉</h2>
      <table>
        <tr style="display: flex">
          <div style="flex: 1">
            <Item
              header
              idx="1"
              label="意识"
              :value="form[config['认知与知觉']['line1']['意识'].key].value"
            />
          </div>
          <div style="flex: 1">
            <Item
              header
              idx=""
              label="GCS评分"
              :value="form[config['认知与知觉']['line1']['GCS'].key].value"
            />
          </div>
        </tr>
        <tr>
          <Item class="w-19" header idx="2" label="视力" />
          <td class="w-20 flex-col h-40 space-around align-start">
            <div class="flex">
              <div class="w-85 flex">
                <label class="text" style="width: 54px">左眼</label>
                <span>:</span>
                <p class="i-b">
                  {{
                    formatOptions(
                      '认知与知觉',
                      'line2',
                      '左选项',
                      '选项',
                      '内容'
                    )
                  }}
                </p>
              </div>
              <div class="w-85 flex">
                <label class="text" style="width: 54px">右眼</label>
                <span>:</span>
                <p class="i-b">
                  {{
                    formatOptions(
                      '认知与知觉',
                      'line2',
                      '右选项',
                      '选项',
                      '内容'
                    )
                  }}
                </p>
              </div>
            </div>
            <div class="flex">
              <label class="text" style="width: 54px">辅助物</label>
              <span>:</span>
              <p class="i-b">
                {{ form[config['认知与知觉']['line2']['辅助物'].key].value }}
              </p>
            </div>
          </td>
        </tr>
        <tr>
          <Item class="w-19" header idx="3" label="听力" />
          <td class="w-20 flex-col h-58 space-around align-start">
            <div class="flex">
              <label class="text" style="width: 54px">左</label>
              <span>:</span>
              <p class="i-b">
                {{
                  formatOptions('认知与知觉', 'line3', '左选项', '选项', '内容')
                }}
              </p>
            </div>
            <div class="flex">
              <label class="text" style="width: 54px">右</label>
              <span>:</span>
              <p class="i-b">
                {{
                  formatOptions('认知与知觉', 'line3', '右选项', '选项', '内容')
                }}
              </p>
            </div>
            <div class="flex">
              <label class="text" style="width: 54px">辅助物</label>
              <span>:</span>
              <p class="i-b">
                {{ form[config['认知与知觉']['line3']['辅助物'].key].value }}
              </p>
            </div>
          </td>
        </tr>
        <tr>
          <Item
            header
            idx="4"
            label="知觉"
            :value="
              formatOptions('认知与知觉', 'line4', '知觉选项', '选项', '内容')
            "
          />
        </tr>
        <tr>
          <Item
            header
            idx="5"
            label="言语"
            :value="
              formatOptions('认知与知觉', 'line5', '言语选项', '选项', '内容')
            "
          />
        </tr>
        <tr>
          <Item
            header
            idx="6"
            label="行为"
            :value="
              formatOptions('认知与知觉', 'line6', '行为选项', '选项', '内容')
            "
          />
        </tr>
        <tr>
          <Item
            header
            idx="7"
            label="记忆力"
            :value="form[config['认知与知觉']['line7']['记忆力'].key].value"
          />
        </tr>
        <tr>
          <Item
            header
            idx="8"
            label="定向力"
            :value="form[config['认知与知觉']['line8']['定向力'].key].value"
          />
        </tr>
        <tr>
          <Item
            header
            idx="9"
            label="疼痛"
            :value="form[config['认知与知觉']['line9']['疼痛'].key].value"
          />
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import { cloneDeep } from 'lodash-unified'
import { defineComponent, onMounted, reactive, toRefs, watch } from 'vue'

import { formatTime } from '@/utils/format'
import config from '@/views/homeNew/evaluation/json/adult.json' //配置信息

import Item from '../RYItem.vue'

export default defineComponent({
  components: { Item },
  props: {
    data: {
      type: Object,
      default: () => {
        return { jsonText: '{}' }
      }
    }
  },
  setup(props) {
    const state = reactive({
      date: '',
      value: '12',
      config: config,
      form: {}
    })

    function initData() {
      //初始化数据
      const form = {}, //表单对象
        config = cloneDeep(state.config) //配置项
      for (const region in config) {
        //遍历isVisible为true的对象-每个区域
        if (config[region].info.isVisible) {
          for (const line in config[region]) {
            //遍历除了info的对象-每行
            if (line != 'info') {
              for (const item in config[region][line]) {
                //遍历除了info的对象-每个formitem
                if (item != 'info') {
                  const obj = config[region][line][item]
                  form[obj.key] = {
                    label: obj.title,
                    value: ''
                  }
                }
              }
            }
          }
        }
      }
      //由于Object.assign对于子对象的处理是直接覆盖，所以需要循环赋值，用于保留子对象的其余参数
      const _data = JSON.parse(props.data.jsonText) || {}
      for (const i in form) {
        form[i] = Object.assign(form[i], _data[i] || '')
      }
      state.form = form
    }

    function formatOptions(el1, el2, el3, reText = '选项', text = '其他') {
      const obj = config[el1][el2][el3]
      let returnText
      if (Array.isArray(state.form[obj.key].value)) {
        const myarray = []
        state.form[obj.key].value.map(item => {
          if (obj.resetCont === item || obj.unitBool) {
            el3 = reText ? el3.replace(reText, text) : el3 + text
            myarray.push(state.form[config[el1][el2][el3].key].value)
          } else {
            myarray.push(item)
          }
        })
        returnText = myarray.join('，')
      } else {
        if (obj.resetCont === state.form[obj.key].value || obj.unitBool) {
          el3 = reText ? el3.replace(reText, text) : el3 + text
          returnText = state.form[config[el1][el2][el3].key].value
        } else {
          returnText = state.form[obj.key].value
        }
      }
      return returnText
    }

    watch(
      () => props.data,
      () => {
        initData()
      }
    )

    onMounted(() => {
      initData()
    })

    return {
      ...toRefs(state),
      formatTime,
      formatOptions
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/views/doc/styles/doc-common.scss';
$border: 1px solid #000;

.container {
  width: 100%;
  font-family: SiYuanSong-Medium;
}

.table {
  margin: -0 getpx(197) 0;
  // display: grid;
  // grid-template-columns: getPx(170) auto;
  display: flex;
  box-sizing: border-box;

  h2 {
    margin: 0;
    width: getpx(170);
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    text-align: center;
    writing-mode: vertical-lr;
    font-weight: normal;
    font-size: getpx(55);
    letter-spacing: getpx(10);
    border: $border;
    border-right: none;
    border-top: none;
  }

  table {
    width: 100%;
    // margin-left: -1px;
    border-collapse: collapse;

    tr {
      display: flex;
      align-items: center;
      border: $border;
      border-top: none;

      &:not(:first-child) {
        margin-top: -1px;
      }

      td {
        padding: 2px;
        height: 19px;
        display: flex;
        align-items: center;
      }
    }
  }

  &:first-child {
    border-top: $border;
  }
}

.w-33 {
  min-width: 33%;
}

.w-10 {
  min-width: 10%;
}

.w-15 {
  min-width: 15%;
}

.w-16 {
  min-width: 16%;
}

.w-17 {
  min-width: 17%;
}

.w-19 {
  min-width: 19%;
}

.w-20 {
  min-width: 20%;
}

.w-25 {
  min-width: 25%;
}

.w-42 {
  min-width: 42%;
}

.w-58 {
  min-width: 58%;
}

.w-85 {
  min-width: 85px;
}

.flex-col {
  flex-direction: column;
}

.h-40 {
  height: 40px !important;
}

.h-58 {
  height: 58px !important;
}

.space-around {
  justify-content: space-around;
}

.i-b {
  display: inline-block;
}

.align-start {
  align-items: flex-start !important;
}
</style>
